<!--
 * @Author: 肖芬芳 10547202+xiao-fenfang@user.noreply.gitee.com
 * @Date: 2022-07-19 09:24:52
 * @LastEditors: 肖芬芳 10547202+xiao-fenfang@user.noreply.gitee.com
 * @LastEditTime: 2022-07-19 14:28:07
 * @FilePath: \vue-api-serverc:\Users\Administrator\Desktop\vite-project\src\views\home\components\FullScreenIco.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 全屏组件 -->
  <el-tooltip
    class="item"
    effect="dark"
    content="全屏"
    placement="bottom-start"
  >
    <el-icon
      :size="20"
      class="fullScreen-ico"
      @click="toggleFullScreen"
    >
      <FullScreen />
    </el-icon>
  </el-tooltip>
</template>

<script lang="ts" setup>
  function toggleFullScreen () {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen()
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      }
    }
  }
</script>

<style lang="scss">
.fullScreen-ico{
  width: 20px;
  vertical-align:middle;
  margin-right: 20px;
}
</style>
